/*
Styling common to navigation elements (anchors and buttons)

Style makeup:
.nav-elem
.nav-elem.button - Buttons <button>
.nav-elem.link - Links <link>

Types:
.nav-elem.normal - default
.nav-elem.icon-only
.nav-elem.full-width

Components:
    .nav-elem > button/a > icon/span
.nav-elem button/a - Semantic element
.nav-elem .icon/i - Icon element
.nav-elem span - Text element

Implemented styles:
.nav-elem.disabled,
.nav-elem.disabled:active
.nav-elem.info-elem
.nav-elem.primary
.nav-elem.secondary
.nav-elem.text-only
.nav-elem.destructive
.nav-elem.outline

 */

/* Nav elem types */

/* .nav-elem Semantic element */
.nav-elem,
.nav-elem.no-active:active {
    color: var(--mobile-text-primary);
    background: none;
}

.nav-elem,
.nav-elem button,
.nav-elem a {
    display: inline-flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    padding: 0 24px;
    border: none;
}

.nav-elem > *:not(:last-child),
.nav-elem button > *:not(:last-child),
.nav-elem a > *:not(:last-child) {
    margin-inline-end: 8px;
}

/* Default type */
.nav-elem,
.nav-elem.normal {
    height: 40px;
    width: auto;
    border-radius: var(--mobile-border-radius-medium);
    box-sizing: border-box;
    text-decoration: none;
    --icon-size: 22px;
}
.nav-elem.slim {
    height: 36px;
}
.nav-elem.no-px {
    padding-left: 0;
    padding-right: 0;
}

.nav-elem.normal.block {
    width: 100%;
    max-width: var(--mobile-elem-max-width);
}

.nav-elem.normal.block .primary-text {
    font-weight: var(--mobile-font-weight-semibold);
}

/* Only the icon */
.nav-elem.icon-only {
    width: auto;
    height: auto;
    border-radius: var(--mobile-border-radius-medium);
    padding: 6px;
    --icon-size: 24px;
}
.nav-elem.icon-only span {
    /* Hide the text */
    display: none;
}

.nav-elem.icon-only.block {
    width: 40px;
    height: 40px;
    padding: 16px;
}
.nav-elem.icon-only:hover {
    background: transparent;
}

/* Full width of container */
.nav-elem.full-width {
    width: 100%;
    height: 56px;
    border-radius: 0;
    display: flex;
    justify-content: flex-start;
    --icon-size: 24px;
}

.nav-elem.full-width > *:not(:last-child) {
    margin-inline-end: 18px;
}

/* Grey out icons */
.nav-elem.disabled i,
.nav-elem.disabled:active i,
.nav-elem:not(.no-active):active i {
    opacity: 0.5;
}

/*
We are avoiding using :not(.disabled) by explicitly
overwriting the .disabled:active case (which should be faster).
 */

/* Primary also serves as the default */

/* Only enforce a default background for
button-type elements.
 */
button.nav-elem,
.nav-elem.primary,
button.nav-elem.no-active:active,
.nav-elem.primary.no-active:active {
    color: var(--mobile-text-inverse);
    background: var(--mobile-button-primary);
}
.nav-elem.disabled,
.nav-elem.disabled:active,
.nav-elem.primary.disabled,
.nav-elem.primary.disabled:active {
    background: var(--mobile-button-disabled);
    color: var(--mobile-text-disabled);
}
.nav-elem:active,
.nav-elem.primary:active {
    background: var(--mobile-button-primary-pressed);
    color: var(--mobile-text-inverse);
}
.nav-elem:hover,
.nav-elem.primary:hover {
    background: var(--mobile-button-primary-hover);
}

.nav-elem.secondary,
.nav-elem.secondary.no-active:active {
    background: var(--mobile-button-secondary);
    color: var(--mobile-text-primary);
}
.nav-elem.secondary.disabled,
.nav-elem.secondary.disabled:active {
    background: var(--mobile-button-secondary);
    color: var(--mobile-text-disabled);
}
.nav-elem.secondary:active {
    background: var(--mobile-button-secondary-pressed);
    color: var(--mobile-text-primary);
}
.nav-elem.secondary:hover {
    background: var(--mobile-button-secondary-hover);
}

.nav-elem.outline,
.nav-elem.outline.no-active:active {
    background: none;
    border: solid 2px var(--mobile-button-outline);
    color: var(--mobile-button-outline);
}
.nav-elem.outline.disabled,
.nav-elem.outline.disabled:active {
    background: none;
    border: solid 2px var(--mobile-border-disabled);
    color: var(--mobile-text-disabled);
}
.nav-elem.outline:active {
    background: none;
    border: solid 2px var(--mobile-button-primary-pressed);
    color: var(--mobile-button-primary-pressed);
}
.nav-elem.outline:hover {
    background: none;
    border: solid 2px var(--mobile-button-outline-hover);
}

.nav-elem.destructive,
.nav-elem.destructive.no-active:active {
    background: var(--mobile-button-error);
    color: var(--mobile-text-on-color);
}
.nav-elem.destructive.disabled,
.nav-elem.destructive.disabled:active {
    background: var(--mobile-button-disabled);
    color: var(--mobile-text-on-color-disabled);
}
.nav-elem.destructive:active {
    background: var(--mobile-button-error-pressed);
    color: var(--mobile-text-on-color);
}
.nav-elem.destructive:hover {
    background: var(--mobile-button-error-hover);
}

.nav-elem.text-only,
.nav-elem.text-icon,
.nav-elem.text-only.no-active:active,
.nav-elem.text-icon.no-active:active {
    background: none;
    color: var(--mobile-text-primary);
    text-decoration: none;
}
.nav-elem.text-only,
.nav-elem.text-icon {
    text-decoration: underline;
}
.nav-elem.text-only.red,
.nav-elem.text-icon.red {
    color: var(--secondary-red);
}
.nav-elem.text-only.no-deco,
.nav-elem.full-width.text-icon,
.nav-elem.full-width.text-only {
    text-decoration: none;
}
.nav-elem.text-only .left-icon {
    display: none;
}
.nav-elem.text-only.disabled,
.nav-elem.text-only.disabled:active {
    color: var(--mobile-text-disabled);
    text-decoration: underline var(--mobile-text-disabled);
}
.nav-elem.text-only:not(.no-deco):active {
    color: var(--mobile-button-secondary-pressed);
    text-decoration: underline var(--mobile-button-secondary-pressed);
}
.nav-elem.text-only:hover {
    color: var(--mobile-button-primary-pressed);
}
.nav-elem.text-only.info-link {
    color: var(--mobile-link-primary);
}
.nav-elem.text-icon.disabled,
.nav-elem.text-icon.disabled:active {
    color: var(--mobile-text-disabled);
    text-decoration: underline var(--mobile-text-disabled);
}
.nav-elem.text-icon:hover,
.nav-elem.text-icon:active {
    color: var(--mobile-button-primary-pressed);
    text-decoration: underline var(--mobile-button-primary-pressed);
}

/* Disable tap events */
.nav-elem.disabled,
.nav-elem.loading {
    pointer-events: none;
    opacity: 1;
}

/* Information strechable element */

.nav-elem.info-elem {
    height: auto;
    padding: 16px 24px;
    width: 100%;
}

.nav-elem.info-elem .multi-text-box .sub-text {
    font: var(--mobile-font-link-large-regular);
    margin: 0;
}

/* Element data value to the right of the text */
.nav-elem.info-elem > .data-value {
    font: var(--mobile-font-link-large-semibold);
    order: 90; /* Close to the end of the list for now */
    margin: 0 8px;
    margin-inline-start: auto;
}

/* Style added for toast component */

.nav-elem.action-link {
    padding: 0;
    background: none;
    height: auto;
    color: var(--mobile-link-primary);
    font: var(--mobile-font-label-bold);
    text-decoration: none;
}
.nav-elem.action-link.login-button,
.nav-elem.action-link.create-account-button {
    color: var(--mobile-text-primary);
    text-decoration: underline;
}

.nav-elem.action-link.toast {
    color: var(--mobile-link-inverse);
}
.nav-elem.action-link.toast span {
    font: var(--mobile-font-copy-semibold);
}

/* .nav-elem text */
.nav-elem span {
    color: inherit;
    text-decoration: inherit;
    font: var(--mobile-font-link-large-regular);
}
.nav-elem.slim span {
    font: var(--mobile-font-link-small-regular);
}
.nav-elem.slim.font-bold span {
    font: var(--mobile-font-link-small-semibold);
}
.nav-elem.underline span,
.nav-elem.underline-offset-4 span {
    text-decoration: underline;
}
.nav-elem.font-600 span {
    font-weight: 600;
}

.nav-elem.semibold span {
    font-weight: var(--mobile-font-weight-semibold);
}

.nav-elem i.icon-size-8 {
    --icon-size: 8px;
}
.nav-elem i.icon-size-16 {
    --icon-size: 16px;
}
.nav-elem i.icon-size-20 {
    --icon-size: 20px;
}
.nav-elem i.icon-size-22 {
    --icon-size: 22px;
}
.nav-elem i.icon-size-24 {
    --icon-size: 24px;
}
.nav-elem i.icon-size-28 {
    --icon-size: 28px;
}
.nav-elem i.icon-size-32 {
    --icon-size: 32px;
}
.nav-elem i.icon-size-48 {
    --icon-size: 48px;
}
.nav-elem i.icon-size-80 {
    --icon-size: 80px;
}

.nav-elem i.left-icon {
    width: var(--icon-size);
    height: var(--icon-size);
}

.nav-elem .right-icon {
    margin-inline-start: auto;
    order: 100; /* Last in list */
    --icon-size: 16px; /* Default size */
    --mask-color: var(--mobile-icon-secondary);
}

.nav-elem .right-icon.primary-color {
    --mask-color: var(--mobile-icon-primary);
}

.rtl .nav-elem .right-icon.icon-chevron-right-thin-outline {
    transform: rotateY(180deg);
}

.nav-elem .left-icon {
    order: -1; /* First in list */
}

/* Tip icon to the right of the text */
.nav-elem .tip-icon {
    --mask-color: var(--mobile-icon-secondary);
    order: 50; /* Mid in list */
    margin-inline-start: -8px;
}

.nav-elem.loading.sprite-fm-theme-after::after,
.nav-elem.loading.sprite-fm-uni-after::after {
    animation-name: rotate;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: steps(8, end);
    margin: auto; /* Justify in center */
    display: block;
    --icon-size: 22px;
    position: absolute;
}

.nav-elem.loading.sprite-fm-theme-after.visible-txt::after,
.nav-elem.loading.sprite-fm-uni-after.visible-txt::after {
    position: relative;
    margin-left: 0.5rem;
}

.nav-elem.loading .text-box-wrapper.sk-elm {
    opacity: 0;
}

.nav-elem.loading.visible-txt .text-box-wrapper.sk-elm {
    opacity: 1;
}

.nav-elem .multi-text-box {
    display: inline-flex;
    flex-flow: column nowrap;
    align-items: flex-start;
}

.nav-elem .multi-text-box .sub-text {
    color: var(--mobile-text-secondary);
    font: var(--mobile-font-link-small-regular);
    margin-top: 2px;
}

/* Icon badge. Used in notification button */
.nav-elem.icon-only span.icon-badge {
    background-color: var(--secondary-red);
    font-size: 12px;
    color: var(--text-color-white-higher);
    text-align: center;
    width: auto;
    border-radius: 9px;
    position: absolute !important;
    top: 0;
    left: 17px;
    display: inline;
    line-height: 14px;
    padding: 1px 4px 0;
    z-index: 1;
    text-decoration: none;
    min-width: 7px;
}

/* Badge button */
button.nav-elem.pro-only,
button.nav-elem.pro-only:hover,
button.nav-elem.pro-only:active {
    color: var(--secondary-red);
    border-color: var(--secondary-red);
    font-size: 12px;
    padding: 0 8px;
    height: 28px;
    cursor: pointer;
}

.nav-elem .right-badge {
    border: solid 1px var(--mobile-button-outline);
    border-radius: 4px;
    color: var(--mobile-text-primary);
    font: var(--mobile-font-caption-large-regular);
    line-height: 16px;
    padding: 4px 6px;
}
.nav-elem .right-badge.small {
    border-radius: 2px;
    border: unset;
    font: var(--mobile-font-caption-small-semibold);
    padding: 2px 4px;
}
.nav-elem .right-badge.brand {
    border-color: var(--mobile-text-brand);
    color: var(--mobile-text-brand);
}
.nav-elem .right-badge.brand-filled {
    background: var(--mobile-text-brand);
    border: 0;
    color: var(--mobile-text-on-color);
    font-weight: 600;
}
.nav-elem .right-badge.info {
    border-color: var(--mobile-text-info);
    color: var(--mobile-text-info);
}
.nav-elem .right-badge.success {
    border-color: var(--mobile-text-success);
    color: var(--mobile-text-success);
}
.nav-elem .right-badge.warning {
    border-color: var(--mobile-text-warning);
    color: var(--mobile-text-warning);
}
.nav-elem .right-badge.error {
    border-color: var(--mobile-text-error);
    color: var(--mobile-text-error);
}

.nav-elem.text-only span.primary-text:hover,
.nav-elem.text-only span.primary-text:active {
    color: var(--mobile-button-primary-pressed);
}

.nav-elem.promo-button {
    background-color: var(--mobile-button-brand);
    color: white;
}